<template>
  <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="35%"
      draggable
      :before-close="handleClose"
  >
    <el-form :model="formData">
      <el-form-item label="父级标签" prop="name" :label-width="formLabelWidth">
        <el-select v-model="formData.parentId" class="m-2" placeholder="Select" size="large">
          <el-option label="根节点" :value="0"/>
          <el-option
              v-for="parent in tagList"
              :key="parent.id"
              :label="parent.name"
              :value="parent.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="code" :label-width="formLabelWidth">
        <el-input v-model="formData.name" style="width: 218px;" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelDialogBtn">取消</el-button>
        <el-button type="primary" @click="saveOrUpdateTag">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div class="table-header">
    <el-button type="primary" @click="saveTagBtn" style="margin-left: 30px;">
      新增
    </el-button>
  </div>
  <div class="table">
    <el-table
        :data="tagList"
        style="width: 30%; margin-bottom: 20px"
        row-key="id"
        border
    >
      <el-table-column prop="name" label="名称" sortable/>
      <el-table-column width="150" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
          >编辑
          </el-button
          >
          <el-popconfirm
              title="你确定删除该条记录吗?"
              confirm-button-type="danger"
              cancel-button-type="primary"
              @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button
                  size="small"
                  type="danger"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script setup>
import {ref} from 'vue'
import request from "../utils/request";
import {ElMessageBox,ElMessage} from "element-plus";
import {userName} from "../config";

const tagList = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = ref({
  id: null,
  name: '',
  parentId:0
})
const formLabelWidth = '140px'


//新增标签按钮
const saveTagBtn = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增标签'
}

//保存或修改标签信息
const saveOrUpdateTag = () => {
  formData.value.handler = JSON.parse(localStorage.getItem(userName)).id
  //发送请求保存数据
  request.post('/systems/tags/manage',formData.value).then(res => {
    if (res.code === 1){
      ElMessage.success(res.data)
      dialogVisible.value = false
      formData.value = {}
      queryTreeTagList()
    }else{
      ElMessage.error(res.message)
    }
  })
}

//对话框取消按钮
const cancelDialogBtn = () => {
  dialogVisible.value = false
  formData.value = {}
}

//处理模态框关闭
const handleClose = (done) => {
  ElMessageBox.confirm('你确定要关闭该窗口吗?')
      .then(() => {
        //将表单中的数据设置为空
        formData.value = {}
        done()
      })
}

//编辑按钮
const handleEdit = (index, row) => {
  //打开模态窗口
  dialogVisible.value = true
  dialogTitle.value = '编辑标签'
  formData.value = row
}

//删除按钮
const handleDelete = (index, row) => {
  request.delete(`/systems/tags/manage/${row.id}`).then(res => {
    if (res.code === 1) {
      queryTreeTagList()
      ElMessage.success(res.data)
    } else {
      ElMessage.error(res.message)
    }
  })
}

// 查询标签列表
const queryTreeTagList = () => {
  request.get('/systems/tags/tree').then(res => {
    if (res.code === 1) {
      tagList.value = res.data
    }
  })
}
queryTreeTagList()

</script>

<style scoped lang="less">
.table-header {
  width: 50%;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
